<template>
	<view class="body">
		<view @click="tiaozhuang(item.id)" class="content" v-for="(item,index) in record" :key="index">
			<view class="sample">{{name}}
			   <view class="textone" v-if="item.status=='1'">
			   	<view class="tubiao1"></view>
			   	<view class="normal">正常</view>
			   </view>
			   <view class="textone" v-if="item.status=='2'">
			   	<view class="tubiao3"></view>
			       <view class="abnormal">异常</view>
			   </view>
			   <view class="textone" v-if="item.status=='3'">
			   	<view class="tubiao5"></view>
			       <view class="fault">故障</view>
			   </view>
			</view>
			<view class="people">
				<view class="name">巡检人：<p>{{item.nickname}}</p></view>
				<view class="data">{{item.createtime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				record:'',
				id:'',
				name:'',
				status:''
			};
		},
		methods:{
			getData () {
				uni.request({
					url:'http://xj.gccrw.cn/api/app/xundetail',
					data:{
						id:this.id
					},
					method:'POST',
					success: (res) => {
						console.log('-----22222222------',res.data.data.record.status);
						this.status = res.data.data.data.status;
						this.name = res.data.data.data.name;
						this.record = res.data.data.record;
					}
				})
			},
			tiaozhuang (id) {
				uni.navigateTo({
					url:'/pages/status/status?id=' + id
				})
			},
		},
		onShow () {
			this.getData()
		},
		onLoad(e) {
			this.id = e.id
		}
	}
</script>

<style>
	.header {
		width: 60%;
		border-radius: 10upx;
		display: flex;
		background-color: #FFFFFF;
		margin-left: 148upx;
		margin-top: 30upx;
	}
	.textone {
		margin-left: 40upx;
		font-size: 40upx;
		display: flex;
		align-items: center;
	}
	.heandtext {
		width: 50%;
		text-align: center;
		padding: 10upx;
		color: #3C6DD2;
	}
	.color {
		color: #00B26A;
	}
	.text2 {
		width: 50%;
		text-align: center;
		padding: 10upx;
		color: #FFFFFF;
		background-color: #3C6DD2;
		border-radius: 10upx 0upx 0upx 10upx;
	}
	.text3 {
		width: 50%;
		text-align: center;
		padding: 10upx;
		color: #FFFFFF;
		background-color: #3C6DD2;
		border-radius: 0upx 10upx 10upx 0upx;
	}
	.sample {
		color: #333333;
		font-size: 32upx;
		display: flex;
		padding: 23upx;
		border-bottom: 2upx solid #CCCCCC;
		justify-content: space-between;
	}
	.people {
		display: flex;
		font-size: 32upx;
		justify-content: space-between;
		padding: 23upx;
	}
	.name {
		color: #999999;
		display: flex;
	}
	.name p {
		color: #333333;
	}
	.data {
		color: #333333;
		font-size: 32upx;
	}
	.heand {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30upx;
		margin-left: 3%;
	}
	.imgsize {
		width: 40upx;
		height: 40upx;
	}
	.riqitext {
		font-size: 30upx;
		color: #333333;
		margin-left: 20upx;
	}
	.qiantou {
		width: 18upx;
		height: 25upx;
		margin-left: 64%;
	}
</style>
